<template>
  <div class="app-container">
    <br />
    <br />
    <el-col v-if="allRooms.length > 0" :span="12" :offset="6">
      <searchForm :formOptions="formOptions" @onSearch="initHouseTree" :formLabelWidth="formLabelWidth"
        @onReset="initHouseTree">
        <el-form-item label="楼号：">
          <el-select v-model="query.houseId" clearable placeholder="请选择">
            <el-option v-for="item in houseList" :key="item.houseId" :label="item.houseName"
              :value="item.houseId"></el-option>
          </el-select>
        </el-form-item>
      </searchForm>
      <el-carousel height="72vh" style="overflow-y: auto" :autoplay="false">
        <el-carousel-item v-for="item in allRooms" :key="item.houseId">
          <div>
            <div class="roof">{{ item.houseName }}楼（{{ item.houseNo }}）</div>
            <div class="building">
              <div class="floors" style="border: 0px solid">
                <el-button type="primary" style="width: 100%" size="small" v-hasPermi="['dorm:floor:add']"
                  @click="addFloor(item.houseId)">添加楼层</el-button>
              </div>

              <div v-for="floor in item.floorList" :key="floor.floorId" class="floors">
                <div class="floor">
                  <div v-for="roomNumber in floor.roomList" :key="roomNumber.roomNo" class="room" :class="{
                    occupied: roomNumber.liveStatus == 1,
                  }" @click="handleClick(roomNumber)">
                    {{ roomNumber.roomNo }}
                  </div>
                  <div class="room" @click="addroom(floor.floorId, item.houseId)" v-hasPermi="['dorm:room:add']">+</div>
                </div>
                <p class="floorText">
                  <el-tooltip placement="top">
                    <div slot="content">
                      <p v-for="user in item.userHouseList" :key="user.nickName">
                        负责人：{{ user.nickName }}；负责人电话：{{ user.phonenumber }}
                      </p>
                    </div>
                    <div style="display: inline-block;">
                      <el-button type="text">楼层：{{ floor.floorNo }}</el-button>
                    </div>
                  </el-tooltip>

                  <br>
                </p>
              </div>

            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-col>
    <div v-else style="text-align: center;margin: 0 auto;">
      <svg t="1691076356178" class="icon" viewBox="0 0 1294 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="1798" width="200" height="200">
        <path
          d="M847.36966 179.779623s-89.822189 4.59834-49.036075-119.006189c0 0 36.207094-50.543094 98.072151 8.732981 0 0 45.374792-120.851321 124.657509-26.189283 6.868528 8.723321 20.161208 55.131774-13.292679 92.816906-9.167698 0 76.075472-5.516075 35.743396 79.495245 0 0-77.901283 87.764528-106.322113 3.216906-0.454038-0.463698-167.733132 211.369057-160.854943 147.494641 0 0 32.072453-106.602264 71.032754-186.551547z"
          fill="#F5F0FF" p-id="1799"></path>
        <path
          d="M775.873208 381.971321c-5.950792-4.144302-5.033057-13.331321-5.033057-16.084529v-0.927396c0.454038-0.917736 30.700679-101.086189 67.815849-179.663698-10.993509-1.371774-30.236981-5.970113-43.52966-22.972377-16.953962-22.054642-17.41766-56.513208-2.28951-102.931321l0.454038-0.917736 0.463698-0.454038c0.454038-0.917736 14.200755-19.765132 39.868377-22.054641 19.243472-1.835472 39.868377 6.433811 60.493283 24.807849C901.448453 44.688906 921.6 8.404528 954.155472 2.878792c22.914415-4.134642 46.736906 8.732981 71.032754 37.221434 6.868528 9.187019 21.078943 52.842264-6.878188 91.435472 8.704 1.381434 19.70717 5.052377 27.957132 12.403925 11.911245 10.568453 21.996679 32.169057 1.835472 73.98883l-0.917736 1.371773c-1.835472 1.835472-43.539321 48.253585-79.282717 40.902038-13.746717-2.762868-24.749887-13.331321-32.536151-30.333585-2.753208 3.216906-6.424151 7.815245-11.457208 14.249057a1619.823094 1619.823094 0 0 1-41.249811 49.171321c-42.621585 49.16166-72.868226 78.567849-89.822189 87.754868-2.289509 0.463698-6.414491 2.762868-11.00317 2.762867a9.196679 9.196679 0 0 1-5.960452-1.835471zM932.61283 214.701887l3.207245 2.753207 5.960453-0.917736c6.414491 18.837736 15.582189 29.869887 27.947472 32.623095 24.295849 5.052377 57.286038-24.353811 68.289208-36.757736 11.457208-24.353811 13.292679-42.737509 5.506415-54.677736-9.631396-14.249057-30.72-16.084528-35.299019-16.084528h-0.908076c-4.124981 0-5.506415-2.29917-5.960453-4.134642l-1.381433-4.144302 3.670943-2.289509s0.454038 0 0.917736-0.463698c30.236981-34.922264 17.871698-76.732377 11.911245-84.083925-21.078943-25.271547-41.703849-36.767396-60.493283-33.55049-34.371623 5.979774-54.53283 57.904302-54.53283 58.358339l-2.753208 7.815246-5.950792-5.979774C872.119547 53.421887 852.866415 44.244528 834.994717 46.08c-17.871698 1.835472-28.874868 14.249057-31.164377 17.002264-13.746717 42.273811-13.283019 73.061434 0.917735 91.89917 15.582189 20.21917 42.621585 19.301434 43.085283 19.301434l9.158038-0.463698-4.124981 8.269283c-37.11517 75.824302-68.279547 176.910491-70.569057 185.189434-0.917736 3.670943-0.463698 5.042717-0.463698 5.506415 16.953962 0 98.535849-90.981434 150.77917-158.063094zM569.653132 383.806792c-3.670943 0-7.341887-2.29917-11.457207-6.897509l-0.917736-0.917736c-0.463698-0.917736-37.578868-79.031547-61.411019-143.36-10.085434 5.052377-30.71034 13.32166-52.243321 6.887849-18.789434-5.506415-33.907925-20.21917-44.457057-44.572981l-0.454037-0.917736v-0.917736c0-1.381434-0.463698-4.134642-0.917736-6.897509-1.835472-11.940226-5.042717-32.169057 8.249962-45.481057 9.621736-9.660377 25.203925-13.785358 47.200604-12.413585-2.753208-12.403925-5.506415-37.675472 7.786264-57.894641 10.085434-16.084528 27.957132-25.271547 52.252981-28.024755h1.371774l1.371773 0.454038c6.414491 2.29917 37.12483 16.084528 51.325585 66.627623 11.457208-10.568453 32.545811-26.652981 51.335246-24.807849 18.325736 1.835472 30.236981 18.374038 34.82566 49.16166v0.917736c0 2.29917-5.960453 59.739774-38.496604 78.113811-12.365283 6.897509-26.575698 7.351547-42.157887 1.835472 1.835472 15.630491 5.506415 45.954415 7.786265 76.278339 6.878189 85.475019-2.743547 89.60966-7.786265 91.89917-0.463698 0.463698-1.835472 0.927396-3.207245 0.927396z m-2.29917-13.33132l1.835472 1.835471c6.414491-11.022491 3.207245-82.248453-8.249962-165.868679l-0.454038-2.29917 1.835472-2.299169 2.743547-3.216906 3.670943 1.835472c16.036226 7.815245 29.782943 8.732981 41.249812 2.299169 26.112-14.703094 32.072453-62.956679 32.990188-68.926792-3.670943-22.972377-11.00317-35.84-21.996679-38.593208-18.335396-4.59834-43.085283 17.92-50.407849 25.271548v0.454037l-2.29917 2.29917c-3.207245 3.216906-6.414491 1.381434-7.332226 0.917736l-3.670944-2.29917 1.381434-3.670943c-11.457208-48.707623-38.496604-62.956679-45.365132-65.709887-20.170868 2.29917-34.835321 10.104755-43.085283 22.972377-15.118491 23.436075-4.579019 56.513208-4.579019 56.513208l2.743547 8.278943-8.240301-0.917736c-22.914415-2.762868-38.042566 0.454038-46.292529 8.732982-9.167698 9.650717-6.868528 25.725585-5.042717 36.294037 0.463698 2.762868 0.917736 5.062038 0.917736 6.89751 9.167698 20.21917 21.542642 33.077132 37.12483 37.221434 24.749887 6.887849 49.036075-8.732981 49.036076-9.19668l5.960453-4.134641 2.289509 6.433811c22.914415 62.956679 59.575547 141.070491 63.23683 148.876076z"
          fill="#D3C4FF" p-id="1800"></path>
        <path
          d="M499.538113 223.898566s-61.874717 41.810113-94.410868-31.705358c-0.463698-14.249057-20.170868-67.091321 56.368302-58.35834 0 0-25.213585-78.113811 53.615095-86.846793 10.539472 3.670943 38.960302 20.673208 50.417509 72.143699-6.878189 6.433811 69.651321-80.412981 83.861736 14.703094 0 0-9.621736 107.065962-82.035925 71.68-0.454038 0 27.957132 206.780377-4.579019 167.723472 0 0-39.41434-82.712151-63.24649-149.349434z"
          fill="#F5F0FF" p-id="1801"></path>
        <path
          d="M171.394415 367.258566c-34.82566 0-71.486792-18.374038-98.072151-35.376302-3.207245-1.835472-5.496755-4.134642-7.786264-6.897509C17.41766 324.530717 0 288.681057 0 288.227019l4.124981-1.835472c0.917736 1.371774 16.036226 32.169057 58.203774 34.004528a27.242264 27.242264 0 0 1-3.207246-13.33132c0.454038-8.269283 5.042717-16.084528 11.911246-19.301434 5.960453-2.753208 12.828981-2.289509 18.789434 2.29917 6.878189 5.052377 10.539472 10.114415 10.085434 16.084528 0 9.187019-10.085434 16.084528-10.085434 16.084528l-0.917736 0.454038c-6.414491 1.381434-12.365283 1.835472-17.871698 2.29917 1.371774 0.917736 2.289509 1.835472 4.124981 3.216905 31.164377 19.755472 76.075472 41.819774 114.118038 32.623095l0.908075 4.598339c-5.496755 0.917736-11.911245 1.835472-18.789434 1.835472zM78.828679 290.526189c-1.835472 0-3.670943 0.454038-5.506415 1.371773-5.496755 2.762868-9.158038 8.732981-9.621736 15.166793 0 3.216906 0.463698 8.269283 3.670944 13.33132 6.414491 0 12.828981-0.927396 20.161207-2.299169 1.371774-0.917736 7.786264-5.979774 7.786264-12.413585 0-4.134642-2.743547-8.269283-8.240301-12.403925a13.708075 13.708075 0 0 0-8.249963-2.753207zM1109.51366 325.448453c-7.341887 0-14.210415-1.381434-18.789434-5.052378l2.743548-3.680603c9.167698 7.351547 32.999849 2.29917 41.703849 0 16.963623-4.134642 30.246642-12.403925 39.414339-21.600604a85.262491 85.262491 0 0 1-17.871698-4.588679l-0.917736-0.463698c-0.454038-0.454038-7.786264-8.732981-5.506415-18.837736 1.835472-7.815245 9.177358-13.785358 21.542642-18.837736 9.631396-3.670943 15.128151-1.381434 18.335396 1.381434 4.124981 3.670943 5.506415 10.568453 3.670943 18.837736-1.381434 5.970113-4.588679 12.403925-9.177358 18.374037h0.927396c54.53283 0 102.197132-58.812377 102.65117-59.730113l3.670943 2.753208c-0.463698 0.917736-52.252981 64.792151-110.901132 61.111547-9.631396 11.032151-24.295849 20.673208-44.003019 25.281207-1.371774 1.371774-14.664453 5.052377-27.493434 5.052378z m49.036076-38.602868a61.391698 61.391698 0 0 0 19.70717 4.59834c5.496755-6.433811 8.69434-12.867623 10.075773-19.301434 1.381434-6.433811 0.917736-11.949887-2.289509-14.239397-2.753208-2.29917-7.332226-2.762868-13.292679-0.463698-10.993509 4.134642-16.953962 9.187019-18.325736 15.166793-1.381434 6.433811 3.207245 12.867623 4.124981 14.239396z"
          fill="#D3C4FF" p-id="1802"></path>
        <path
          d="M48.301887 876.389434c0 77.360302 261.670642 140.075472 584.45283 140.075472s584.45283-62.71517 584.45283-140.075472c0-77.369962-261.670642-140.075472-584.45283-140.075472S48.301887 799.009811 48.301887 876.389434z"
          fill="#E4DBFF" p-id="1803"></path>
        <path d="M589.727396 307.934189v456.742641l444.531925 87.81283V353.183396L589.727396 301.596981" fill="#D3C4FF"
          p-id="1804"></path>
        <path d="M593.823396 301.596981v459.901585L226.816 868.786717v-489.781132L593.823396 301.596981z" fill="#E4DBFF"
          p-id="1805"></path>
        <path d="M651.27366 433.770264v528.258415l382.985661-109.548679V356.371321l-382.985661 77.398943z" fill="#D3C4FF"
          p-id="1806"></path>
        <path d="M654.471245 962.946415l-434.968151-83.755472V386.241208l434.968151 51.605735" fill="#B19CFF" p-id="1807">
        </path>
        <path
          d="M654.471245 433.770264L777.563774 643.352151s0.908075 11.321962 19.610566 3.168604l360.177509-112.707623s9.119396-5.438792 0-16.297057l-123.102189-164.323018-379.788075 80.577207z"
          fill="#E4DBFF" p-id="1808"></path>
        <path
          d="M657.65917 430.60166L223.154717 378.995925 125.584906 562.784604l434.95849 77.398943 97.115774-209.581887z"
          fill="#E4DBFF" p-id="1809"></path>
      </svg>
    </div>



    <!-- <el-row :gutter="20">
      <el-carousel height="72vh" style="overflow-y: auto" :autoplay="false">
        <el-carousel-item v-for="(list, index) in sortHouseData" :key="index">

        </el-carousel-item>
      </el-carousel>
      <el-col :span="16">
        <el-page-header v-if="showType != 0" @back="goback" content="返回楼栋列表"></el-page-header>
        <apartmentBuilding @searchHouse="searchHouse" noClick v-if="showType == 0"></apartmentBuilding>
        <apartmentFloor noClick :houseId="houseId" v-else-if="showType == 1"></apartmentFloor>
        <apartmentRoom :floorId="floorId" v-else-if="showType == 2"></apartmentRoom>
      </el-col>
    </el-row> -->
    <el-dialog title="宿舍床位信息" :visible.sync="openBed" width="70%" append-to-body>
      <allocationBeds style="min-height: 50vh;" :roomId="choseRoomId"></allocationBeds>
    </el-dialog>


    <!-- <el-dialog title="打印学生住宿信息" :visible.sync="printVis" width="70%" append-to-body>
      <printPaper >
      </printPaper>
    </el-dialog> -->
  </div>
</template>

<script>
import apartmentFloor from "@/views/apartment/apartmentFloor.vue";
import apartmentRoom from "./apartmentRoom.vue";
import apartmentBuilding from "./apartmentBuilding.vue";
import allocationBeds from "./allocationBeds.vue";
import { mapState, mapActions } from 'vuex'
import searchForm from "@/components/Search/searchForm.vue";
import printPaper from "./printPaper.vue"
export default {
  data() {
    return {
      floors: 7, // 可配置楼层数
      roomsPerFloor: 10, // 可配置每层房间数
      occupiedRooms: [], // 存储已入住房间的数组
      showType: 0, // 0 为公寓楼列表  1为公寓楼层  2为房间号
      houseId: null, // 添加 的楼id
      floorId: null,
      openBed: false,
      choseRoomId: null,
      formLabelWidth: "50px",
      formOptions: [
      ],
      printVis: true,
      query: {
        pageSize: 99999,
        pagNo: 1,
        houseId: "",
        // houseNo: ""
      }
    };
  },
  computed: {
    ...mapState({
      allRooms: state => state.apartmentBuilding.allRooms,
      houseList: state => state.apartmentBuilding.list,
    }),
    sortHouseData() {
      let arr = [];
      for (let i = 0; i < Math.ceil(this.allRooms.length / 3); i++) {
        console.log(arr, Math.ceil(this.allRooms.length / 3))

        arr.push(this.allRooms.slice(i * 3, i * 3 + 3))
      }
      // console.log(arr, Math.ceil(this.allRooms.length / 3))
      return arr
    }
  },

  async mounted() {
    this.getAllRoom(this.query)
    await this.getHouseList()

    this.query.houseId = this.houseList[0].houseId
  },
  methods: {
    ...mapActions({
      getAllRoom: 'apartmentBuilding/allInfolist',
      getHouseList: 'apartmentBuilding/getTable',
    }),
    initHouseTree(val) {
      Object.assign(this.query, val);
      this.getAllRoom(this.query)
    },

    formatRoomNumber(floor, roomNumber) {
      return roomNumber < 10
        ? floor + "0" + roomNumber
        : floor + "" + roomNumber;
    },
    isOccupied(floor, roomNumber) {
      return this.occupiedRooms.includes(floor + "" + roomNumber);
    },
    handleClick(roomInfo) {
      this.openBed = true;
      this.choseRoomId = roomInfo.roomId;
    },

    // 楼层倒置方法
    floorReverse(number) {
      return this.floors - number + 1;
    },

    // 添加楼层点击后
    addFloor(houseId) {
      this.showType = 1; this.houseId = houseId
      console.log(this.$router)
      this.$router.push({
        name: "ApartmentBuilding",
        query: {
          houseId
        }
        // path: '/apartment/floorPlan?houseId=' + houseId,
      })
    },

    // 添加宿舍点击后
    addroom(floorId, houseId) {
      this.showType = 2; this.floorId = floorId
      this.$router.push({
        name: "ApartmentBuilding  ",
        query: {
          houseId,
          floorId
        }
        // path: '/apartment/floorPlan?floorId=' + floorId + '&houseId=' + houseId,
      })
    },
    // 回到宿舍楼列表页
    goback() {
      this.showType = 0;
      this.$router.push({
        name: "FloorPlan",
        query: null
      })
    },
    // 搜索条件后
    searchHouse(val) {
      this.getAllRoom({ ...this.query, ...val })
    }
  },
  components: {
    apartmentFloor,
    apartmentRoom,
    apartmentBuilding,
    allocationBeds,
    searchForm,
    printPaper
  },
};
</script>

<style scoped>
/* CSS样式 */
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

.building {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  max-height: 72vh;
  /* height: 72vh; */
  overflow: auto;
}

.floors {
  flex-basis: 100%;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: 0 0 10px #ccc;
  border: 1px solid #ccc;
}

.floor {
  justify-content: space-around;
  display: inline-block;
}

.room {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  background-color: #f2f2f2;
  margin: 5px;
  line-height: 30px;
  font-size: 10px;
  cursor: pointer;
}

.room.occupied {
  background-color: #ffcccc;
}

.roof {
  width: 100%;
  margin: 0 auto;
  height: 30px;
  background-color: #888;
  text-align: center;
  color: #fff;
  line-height: 30px;
}

.floorText {
  margin: 0;
  font-size: 12px;
  margin-bottom: 5px;
}
</style>